<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>设置表格有滚动条</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			table {
				/*设置相邻单元格的边框间的距离*/
				border-spacing: 0;
				/*表格设置合并边框模型*/
				border-collapse: collapse;
				text-align: center;
			}

			/*关键设置 tbody出现滚动条*/
			table tbody {
				display: block;
				height: 80px;
				overflow-y: scroll;
			}

			table thead,
			tbody tr {
				display: table;
				width: 100%;
				table-layout: fixed;
			}

			/*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
			table thead {
				width: calc(100% - 1em)
			}


			table thead th {
				background: #ccc;
			}
		</style>
	</head>

	<body>
		<table width="80%" border="1">
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>出生年月</th>
					<th>手机号码</th>
					<th>单位</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>18</td>
					<td>1990-9-9</td>
					<td>13682299090</td>
					<td>阿里巴巴</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>18</td>
					<td>1990-9-9</td>
					<td>13682299090</td>
					<td>阿里巴巴与四十大盗</td>
				</tr>
				<tr>
					<td>王五</td>
					<td>18</td>
					<td>1990-9-9</td>
					<td>13682299090</td>
					<td>腾讯科技</td>
				</tr>
				<tr>
					<td>孟想</td>
					<td>18</td>
					<td>1990-9-9</td>
					<td>13682299090</td>
					<td>浏阳河就业</td>
				</tr>
			</tbody>
		</table>
	</body>

</html>
